<template>
  <div class="ivestorMachineBox">
    <div class="space-occupying"></div>
    <div class="mapBox">
      <Suspense>
        <T_map ref="tMapRef" v-model:markers="markers" @transmit="transmit" />
      </Suspense>
    </div>
    <div class="itemBox" v-if="machine_list.length">
      <Machine_item
        @click="skipDetail(item)"
        v-for="item in machine_list"
        :key="item.machineId"
        :machine_item="item"
        @open="open"
      />
    </div>
    <div class="null_data" v-else>
      <Null_data />
    </div>
    <!-- 底部弹出选择框 -->
    <van-action-sheet
      v-model:show="show"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="select"
    />
  </div>
  <Tabbar />
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useMapInfoStore } from '@/stores'
import { useRouter } from 'vue-router'
import { getDeviceListApi } from '@/api/ivestorMachine/ivestorMachine'
import { useMapMethods } from '@/hooks/map_methods'

const { navToMap } = useMapMethods()
const $router = useRouter()
const tMapRef = ref()
const show = ref(false)
const mapSkipItem = ref({
  machineName: null,
  latitude: null,
  longitude: null,
})
const actions = [
  { value: 2, name: '高德地图' },
  { value: 3, name: '腾讯地图' },
]
const mapInfoStor = useMapInfoStore()
const machine_list = ref([])
const markers = computed(() => {
  return machine_list.value.map((item) => {
    return {
      lng: Number(item.longitude),
      lat: Number(item.latitude),
      machineName: item.machineName,
    }
  })
})

/** 获取百度地图定位的经纬度 */
const transmit = async (ev) => {
  const mapInfo = { longitude: ev.lng, latitude: ev.lat }
  mapInfoStor.setMapInfo(mapInfo) // 修改全局的经纬度
  try {
    const res = await getDeviceListApi(mapInfo)
    machine_list.value = res.data
    console.log(res)
  } catch (error) {}
}
const skipDetail = (item) => {
  console.log(item)
  $router.push({
    path: '/ivestorSalesDetail',
    query: { machineId: item.machineId, machineName: item.machineName },
  })
}

const open = (item) => {
  show.value = true
  // console.log(item)
  mapSkipItem.value.machineName = item.machineName
  mapSkipItem.value.latitude = item.latitude
  mapSkipItem.value.longitude = item.longitude
}
/**调起手机的地图app */
const select = (item) => {
  // 传值进行地图跳转
  navToMap(
    mapSkipItem.value.latitude,
    mapSkipItem.value.longitude,
    mapSkipItem.value.machineName,
    item.value,
  )
}
onMounted(() => {
  tMapRef.value.mapInit()
})
</script>

<style lang="scss" scoped>
.ivestorMachineBox {
  position: relative;
  padding: 0 0 100px;
}
.space-occupying {
  width: 100%;
  height: 210px;
}
.mapBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 220px;
  z-index: 9;
  padding: 10px 0 0;
  background: #f5f5f5;
  box-sizing: border-box;
}
.itemBox {
  padding-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--defaultBgc);
  width: 100%;
  min-height: calc(100% - 310px);
}
.null_data {
  margin-top: 13px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
